<template>
  <div>
    <el-form v-if="device.online && device.map !== undefined" label-width="80px" label-position="left">
      <el-row :gutter="5">
        <el-col :span="funcSpan">
          <el-form-item v-if="device.map.PC !== undefined" :label="$t('System')">
            <el-switch v-model="pcStatus" :active-text="$t('On')" :inactive-text="$t('Off')"
              v-on:change="handleChangeState(device,'PC',$event)"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="funcSpan">
          <el-form-item v-if="device.map.AC !== undefined" :label="$t('device.AC')">
            <el-switch :value="device.map.AC === 'on'" :active-text="$t('On')" :inactive-text="$t('Off')"
              v-on:change="handleChangeState(device,'AC',$event)"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="funcSpan">
          <el-form-item v-if="device.map.cloth !== undefined" :label="$t('device.Cloth')">
            <el-switch :value="device.map.cloth === 'on'" :active-text="$t('Down')" :inactive-text="$t('Up')"
              v-on:change="handleChangeState(device,'cloth',$event)"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="funcSpan">
          <el-form-item v-if="device.map.Curtain !== undefined" :label="$t('device.Curtain')">
            <el-switch :value="device.map.Curtain === 'on'" :active-text="$t('Down')" :inactive-text="$t('Up')"
              v-on:change="handleChangeState(device,'curtain',$event)"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="funcSpan">
          <el-form-item v-if="device.map.projector !== undefined" :label="$t('device.Projector')">
            <el-switch :value="device.map.projector === 'on'" :active-text="$t('On')" :inactive-text="$t('Off')"
              v-on:change="handleChangeState(device,'projector',$event)"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="funcSpan">
          <el-form-item v-if="device.map.height !== undefined" :label="$t('device.Lifting')">
            <el-button type="primary" icon="el-icon-top" @mousedown.native="handleChange(device,'height','up')"
              @mouseup.native="handleChange(device,'height','pause')">
              {{ $t('Up') }}</el-button>
            <el-button type="primary" icon="el-icon-bottom" @mousedown.native="handleChange(device,'height','down')"
              @mouseup.native="handleChange(device,'height','pause')">
              {{ $t('Down') }}
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="funcSpan">
          <el-form-item v-if="device.map.angle !== undefined" :label="$t('Angle')">
            <el-button type="primary" icon="el-icon-top" @mousedown.native="handleChange(device,'angle','up')"
              @mouseup.native="handleChange(device,'angle','pause')">
              {{ $t('Plus') }}
            </el-button>
            <el-button type="primary" icon="el-icon-bottom" @mousedown.native="handleChange(device,'angle','down')"
              @mouseup.native="handleChange(device,'angle','pause')">
              {{ $t('Minus') }}
            </el-button>
          </el-form-item>
        </el-col>
        <el-col v-for="(serial,index) in device.map.serial" :key="'serial_'+index" :span="funcSpan">
          <el-form-item :label="serial.name">
            <el-button-group>
              <el-button v-for="(channel,si) in serial.cmds" :key="'cmd_'+index+'_'+si" type="primary"
                style="margin-bottom: 5px;min-width: 90px;"
                v-on:click="handleSerialChange(device,serial.id,channel.id)">
                {{ channel.name }}</el-button>
            </el-button-group>
          </el-form-item>
        </el-col>
        <el-col v-for="(serial,index) in device.map.wireless" :key="'wifi_serial_'+index" :span="funcSpan">
          <el-form-item :label="serial.name">
            <el-button-group>
              <el-button v-for="(channel,si) in serial.cmds" :key="'cmd_'+index+'_'+si" type="primary"
                style="margin-bottom: 5px;min-width: 90px;"
                v-on:click="handleSerialChange(device,serial.id,channel.id)">
                {{ channel.name }}</el-button>
            </el-button-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <control-controller v-if="device.control" :value="device.control" />
  </div>
</template>
<script>
  import BaseController from "./BaseController";
  import ControlController from '@/views/device/components/controller/ControlController.vue';
  export default {
    components: {
      ControlController
    },
    name: 'PlatformItem',
    mixins: [BaseController],
    data() {
      return {
        pcStatus: false,
        funcSpan: 8
      }
    },
    methods: {
      // websocketReceive(data) {
      //   if (!this.device.code) {
      //     return
      //   }
      //   if (data.code === this.device.code) {
      //     this.device = Object.assign({}, this.device, data);
      //     this.setItemDevice(this.device);
      //     return;
      //   }
      //   const gatewayCode = this.device.code.split('@')[0]
      //   if (data.type !== 17 || data.code.indexOf(gatewayCode) < 0) {
      //     return
      //   }
      //   this.device = Object.assign({}, this.device, {
      //     control: data.map
      //   });
      // },
      setItemDevice(device) {
        this.pcStatus = device.map ? device.map.PC === 'on' : false
      },
      handleChangeState(device, key, state, action) {
        const vm = this
        if (key === 'PC' && state === false) {
          this.$confirm(this.$t("common.ConfirmPowerOff"))
            .then(function () {
              vm.handleChange(device, key, state ? 'ON' : 'OFF', vm.$t('Off'))
            })
            .catch(() => {
              vm.pcStatus = true
            })
          return
        }
        this.handleChange(device, key, state ? 'ON' : 'OFF', key === 'PC' ? vm.$t('On') : null, action)
      },
      handleChange(device, key, status, action) {
        var code = device.code
        var command = 'control'
        var message = {}
        message[key] = status
        var content = null
        if (code.indexOf("PLATFORM_") >= 0) {
          content = JSON.stringify(message)
        } else if (code.indexOf("BleGate_") >= 0) {
          const data = {
            "PackageType": 0,
            "DeviceControl": {
              "DevMac": code.split("@").pop(),
              "Message": message
            }
          }
          content = JSON.stringify(data)
        }
        this.doCommand(code, command, content, action);
      },
      handleSerialChange(device, serial, channel) {
        var code = device.code
        var command = 'control'
        const message = {
          Serial: {
            cmd: serial,
            index: channel
          }
        }
        var content = null
        if (code.indexOf("PLATFORM_") >= 0) {
          content = JSON.stringify(message)
        } else if (code.indexOf("BleGate_") >= 0) {
          const data = {
            "PackageType": 0,
            "DeviceControl": {
              "DevMac": code.split("@").pop(),
              "Message": message
            }
          }
          content = JSON.stringify(data)
        }
        this.doCommand(code, command, content);
      }
    }
  }

</script>
